<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <!-- 引入CSS -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container mt-3">
    <h2>表单验证</h2>
    <p>使用 .was-validated 类显示表单在提交之前需要填写的内容：</p>
    <form action="" class="was-validated">
      <div class="form-group">
        <label for="uname">Username:</label>
        <input type="text" class="form-control" id="uname" placeholder="Username" name="uname" required>
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">请输入用户名！</div>
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Password" name="pswd" required>
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">请输入密码！</div>
      </div>
      <div class="form-group form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox" name="remember" required> 同意协议
          <div class="valid-feedback">验证成功！</div>
          <div class="invalid-feedback">同意协议才能提交。</div>
        </label>
      </div>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>


  <!-- 引入JS -->
  <script src="bootstrap-5.2.3-dist/js/bootstrap.min.js"></script>
</body>

</html>